<template>

    <div class="login-banner">
        <el-form ref="loginForm"
                 :model="user"
                 class="login-main"
                 :rules="rules">
            <div class="login-box">
                <h3 class="loginTitle">忘记密码</h3>

                <div class="login-form" style="background: none; margin-top: 15px;">
                    <el-form-item prop="email">
                        <el-input prefix-icon="el-icon-message" type="text" auto-complete="false" v-model="user.email"
                                  placeholder="请输入邮箱"></el-input>
                    </el-form-item>
                    <el-form-item prop="code" :inline="true">
                        <el-input prefix-icon="el-icon-chat-dot-square" type="text"
                                  style="width: 180px;margin-right: 18px" auto-complete="false" v-model="user.code"
                                  placeholder="验证码"></el-input>
                        <el-button v-if="showButton" type="primary" @click="captcha">发送验证码</el-button>
                        <el-button v-else type="primary" :disabled="true">请稍等{{count}}秒</el-button>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" type="text" auto-complete="false" v-model="user.password"
                                  placeholder="请输入新密码"></el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input prefix-icon="el-icon-lock" type="text" auto-complete="false" v-model="user.repassword"
                                  placeholder="请再次输入密码"></el-input>
                    </el-form-item>
                    <el-button type="primary" class="am-cf" @click="changePassword">更换密码</el-button>

                </div>
            </div>
        </el-form>

    </div>

</template>

<script>
    import {forgetPwd, forgetPwdCode} from "../../assets/api/userApi";

    export default {
        data() {
            return {
                user: {
                    email: '',
                    password: '',
                    repassword: '',
                    code: ''
                },
                showButton: true,
                count: 0,
                timer: null,
                rules: {
                    email: {required: true, message: '请输入邮箱', trigger: 'blur'},
                    code: {required: true, message: '请输入验证码', trigger: 'blur'},
                    password: {required: true, message: '请输入密码', trigger: 'blur'},
                    repassword: {required: true, message: '请再次输入密码', trigger: 'blur'},
                }
            }
        },
        methods: {
            captcha() {
                forgetPwdCode(this.user).then((res) => {
                    let regEmail = /^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/;
                    if (!regEmail.test(this.user.email)) {
                        this.$message.error("邮箱格式不正确！");
                    } else if (res.code === 200) {
                        this.countDown();
                        this.$message.success(res.message);
                    } else {
                        this.$message.error(res.message);
                    }
                });
            },
            countDown() {
                const timeCount = 60;
                if (!this.timer) {
                    this.showButton = false;
                    this.count = timeCount;
                    this.timer = setInterval(() => {
                        if (this.count > 0 && this.count <= timeCount) {
                            this.count--;
                        } else {
                            clearInterval(this.timer);
                            this.showButton = true;
                            this.timer = null
                        }
                    }, 1000);

                }
            },
            changePassword() {
                if (this.user.repassword !== this.user.password) {
                    this.$message.error("两次输入密码不一致！");
                } else {
                    forgetPwd(this.user).then((res) => {
                        if (res.code === 200) {
                            this.$message.success(res.message);
                            this.$router.push('/login');
                        } else {
                            this.$message.error(res.message);
                        }
                    }).catch(error => {
                            console.log(error);
                        }
                    )
                }
            }
        }
    }

</script>

<style scoped>
    @import "../../assets/css/dlstyle.css";
    @import "../../assets/css/amazeui.css";
    @import "../../assets/css/bootstrap.css";
</style>
